<template>
  <view class="container">
    <view class="header">
      <text class="title">热门小说推荐</text>
    </view>
    <view class="book-list">
      <view class="book-item" v-for="book in books" :key="book.id" @click="goToBookDetail(book.id)">
        <image class="book-cover" :src="book.cover" mode="aspectFill"></image>
        <text class="book-title">{{ book.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      books: []
    }
  },
  onLoad() {
    this.fetchBooks()
  },
  methods: {
    async fetchBooks() {
      const res = await this.$api.get(
        "/api/books"
      )
      this.books = res.data
    },
    goToBookDetail(bookId) {
      uni.navigateTo({
        url: `/pages/bookDetail/bookDetail?bookId=${bookId}`
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.book-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.book-item {
  width: 48%;
  margin-bottom: 20px;
}

.book-cover {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

.book-title {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}
</style>